<!-- Index -->
<template>
  <div class="index">
    <div class="header">
      <div class="bi-logo">
        <img src="../assets/img/logo.png" alt="BI-Management" />
        <span class="logo-text">沃邦云BI</span>
      </div>
      <div class="bi-menu-box">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          router
        >
          <el-menu-item index="/strategies">策略仓库</el-menu-item>
          <el-menu-item index="/kpiManagement">KPI管理</el-menu-item>
          <el-menu-item index="/dataDictionary">数据字典</el-menu-item>
          <el-menu-item index="/systemLog">系统日志</el-menu-item>
          <el-menu-item index="/userManagement">用户管理</el-menu-item>
        </el-menu>
      </div>

      <div class="account-box">
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        <span class="login-name">{{ username }}</span>
        <div class="handle-iconfont-box">
          <i class="iconfont iconbianji"></i>
          <i class="iconfont iconqiehuanzuhu" @click="logOut()"></i>
        </div>
      </div>
    </div>
    <div class="content">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "/strategies",
      username: "", // 登陆帐号
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.username = this.$store.getters.username;
  },
  methods: {
    // 导航切换
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    // 退出登陆
    logOut() {
      this.$store.dispatch("saveUserToken", null);
      this.$router.push({
        path: "/"
      })
    },
  },
};
</script>
<style lang="less" scoped>
.index {
  .header{
    height: 100px;
    padding: 20px;
    box-sizing: border-box;
    .shadow();
    .alignCenter();
    .bi-logo{
      width: 160px;
      flex: 0 0 160px;
      .alignCenter();
      img{
        width: 40px;
      }
      .logo-text{
        font-size: 26px;
        font-weight: 500;
        color: #303133;
        margin-left: 10px;
      }
    }
    .bi-menu-box{
      flex: 1;
      margin-left: 30px;
      .el-menu.el-menu--horizontal{
        border: none;
        .el-menu-item{
          margin: 0 15px;
          &.is-active{
            border-color: @color-primary;
            color: #303133;
            font-weight: 500;
          }
        }
      }
    }
    .account-box{
      width: 200px;
      flex: 0 0 200px;
      margin-left: 20px;
      .alignCenter();
      .login-name{
        width: 90px;
        color: @color-black;
        margin: 0 10px;
      }
      .handle-iconfont-box{
        .alignCenter();
        .iconfont{
          font-size: 14px;
          color: @color-black;
          font-weight: 500;
          margin-left: 5px;
          cursor: pointer;
          &:first-child{
            margin-left: 0;
          }
          &.iconbianji{
            font-size: 22px;
          }
        }
      }
    }
  }
  .content{
    height: 100%;
  }
}
</style>
